import 'package:flutter/material.dart';

import '../utils/color_utils.dart';

class Register extends StatelessWidget {
  const Register({super.key});

  Widget _buildLogo() {
    return Container(
      width: 64,
      height: 64,
      decoration: BoxDecoration(
        color: ColorUtils.black,
        borderRadius: BorderRadius.circular(10),
      ),
      child: const Center(
        child: Text('VV', style: TextStyle(
            color: Colors.white,
            fontSize: 30,
            fontWeight: FontWeight.w700,
          )
        ),
      )
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        padding: const EdgeInsets.symmetric(horizontal: 30),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            const SizedBox(height: 100),
            _buildLogo(),
            const SizedBox(height: 32),
            Text("Register", style: TextStyle(
              color: ColorUtils.black,
              fontSize: 35,
              fontWeight: FontWeight.w700,
            )),
            const SizedBox(height: 40),
            // 新密码
            Text("New Password", style: TextStyle(
              color: ColorUtils.black,
              fontSize: 15,
              fontWeight: FontWeight.w400,
            )),
            const SizedBox(height: 8),
            TextField(
              decoration: InputDecoration(
                hintText: "Enter Password",
                hintStyle: TextStyle(
                  color: ColorUtils.hit,
                  fontSize: 17,
                  fontWeight: FontWeight.w400,
                ),
                border: OutlineInputBorder(
                  borderRadius: BorderRadius.circular(10),
                  borderSide: BorderSide(
                    width: 2,
                    color: ColorUtils.black,
                  )
                ),
              ),
            ),
            const SizedBox(height: 20),
            Text("Verify Password", style: TextStyle(
              color: ColorUtils.black,
              fontSize: 15,
              fontWeight: FontWeight.w400,
            )),
            const SizedBox(height: 8),
            // 确认密码
            TextField(
              decoration: InputDecoration(
                hintText: "Enter the password again",
                hintStyle: TextStyle(
                  color: ColorUtils.hit,
                  fontSize: 17,
                  fontWeight: FontWeight.w400,
                ),
                border: OutlineInputBorder(
                    borderRadius: BorderRadius.circular(10),
                    borderSide: BorderSide(
                      width: 2,
                      color: ColorUtils.black,
                    )
                ),
              ),
            ),
            Container(
              height: 56,
              margin: const EdgeInsets.symmetric(vertical: 20),
              width: double.infinity,
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(10),
              ),
              child: ElevatedButton(
                onPressed: () {},
                style: ButtonStyle(
                  backgroundColor: WidgetStatePropertyAll(ColorUtils.button),
                  shape: WidgetStatePropertyAll(RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(10),
                  )),
                ),
                child: const Text("Register", style: TextStyle(
                  fontSize: 17,
                  fontWeight: FontWeight.w600,
                  color: Colors.white,
                )),
              ),
            ),
            Expanded(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.end,
                children: [
                  RichText(
                    textAlign: TextAlign.center,
                    text: TextSpan(
                      style: const TextStyle( fontSize: 12),
                      children: [
                        TextSpan(
                          text: "Login without boundaries means agreement ",
                          style: TextStyle(color: ColorUtils.hit)
                        ),
                        TextSpan(
                            text: "《Use Protocol》",
                            style: TextStyle(color: ColorUtils.black)
                        )
                      ],
                    ),
                  ),
                ],
              ),
            )
          ],
        ),
      ),
    );
  }
}
